<template>
  <section>
    <div id="myChart" style="width:300px;height:300px"></div>
    <el-button type="text" @click="saveImg()">saveImg</el-button>
  </section>
</template>

<script>
  import Vue  from  'vue'
  import echarts from 'echarts' //引入echarts
  Vue.prototype.$echarts = echarts //引入组件

  export default {
    name: "chiarts",
    props:['currAnswer','currItem'],
    data () {
      return {
        name:[],
        point:[],
        female:[
          {id:1,max:66,min:-20,name:'相火'},
          {id:2,max:45,min:-20,name:'燥金'},
          {id:3,max:45,min:-20,name:'寒水'},
          {id:4,max:111,min:-20,name:'湿土'},
          {id:5,max:93,min:-20,name:'风木'},
        ],
        male:[
          {id:1,max:63,min:-20,name:'相火'},
          {id:2,max:45,min:-20,name:'燥金'},
          {id:3,max:45,min:-20,name:'寒水'},
          {id:4,max:111,min:-20,name:'湿土'},
          {id:5,max:84,min:-20,name:'风木'},
        ],
        label: null
      }
    },
    mounted(){
      this.drawLine()
    },
    created(){
      console.log('————————————————————————————————————————————————',this.currAnswer)
      let tmp =this.currAnswer.reportItems[0].data.vals.find(v=>v.code === 'gender')
      if(tmp){
        if(tmp.val === '男') this.label = this.male
        if(tmp.val === '女') this.label = this.female
      }
      this.currAnswer.data.sum.forEach(s=>{
        if(s.point){
          this.point.push(s.point)
        }else {
          this.point.push(0)
        }
      })
      // this.getChart()
    },
    watch:{
      currAnswer(nv,ov){
      }
    },
    methods: {
      drawLine(){
        console.log('这里是刚开始')
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          color:['#48576a'],
          title : {
            // text: this.currAnswer.instance.title,
            // subtext: '根目录'//子标题
          },
          tooltip : {//控制鼠标滑过折现点出现的窗口内容哪个坐标值在上
            trigger: 'item',
            axisPointer:{//去掉鼠标滑过折现点的时候默认出现的线条
              type:'none'
            },
            textStyle:{
              align:'left'
            },
          },
          toolbox: {
            show : false,
            feature : {
              // dataZoom:{ //区域缩放
              //   yAxisIndex:'none'
              // },
              mark : {show: true},
              dataView : { //数据视图
                show: true,
                readOnly: false
              },
              restore : {show: true},//刷新
              saveAsImage : {show: true}//保存图片
            }
          },
          polar : {
            center:['50%','60%'],
            radius:'60%',
            min:5,
            splitNumber:5,
            // indicator : this.currAnswer.data.sum,//数据源
            indicator :this.label
          }
          ,
          calculable : true,
          series : [//显示数据的各种
            {
              itemStyle: {
                normal: {
                  areaStyle: {
                    type: 'default'
                  }
                }
              },
              // name: this.currAnswer.userId+'#用户',//提示框标题
              type: 'radar',//雷达图
              symbolSize:'7',//折线原点的大小
              label:{//折线上的标记
                show:true,
                position:'top',
                fontSize:'12'
              },
              data : [
                {
                  value :this.point,//逆时针
                }
              ]
            }
          ]
        })
      },
      saveImg(){
        var imgCode = document.getElementsByTagName('canvas')[0].toDataURL();
        console.log('后面是保存图片')
        if(imgCode){
          this.$store.dispatch({type:'uploadBase64',imgCode})
            .then(response => {
              this.$emit('saveImg',response)
            })
            .catch(error=>{
              console.log(error)
              this.$message({type:'error',message:error});
            });
        }
      },
    }


  }
</script>

<style scoped>

</style>
